<template>
    <el-dialog :visible.sync="visible" width="80%">
        <div class="tltle">订单详情</div>
        <div class="order-detail">
            <label>订单编号：<span>{{detail.orderNumber}}</span></label>
            <label>当前状态：<span style="color: red">{{detail.orderStatusValue}}</span><span v-if="detail.refundStatusValue != null" style="color: red">->{{detail.refundStatusValue}}</span></label>
            <label>订单过期时间：<span>{{detail.invalidTime}}</span></label>
        </div>
        <div class="order-status">
            <div class="finish">下单</div>
            <div :class="detail.orderStatus >= 2 && detail.orderStatus != 5 ? 'finish':'unfinish'">付款</div>
            <div :class="detail.orderStatus >= 3 && detail.orderStatus != 5 ? 'finish':'unfinish'">发货</div>
            <div :class="detail.orderStatus == 4 && detail.orderStatus != 5 ? 'finish':'unfinish'">收货</div>
            <div :class="detail.orderStatus == 4 && detail.orderStatus != 5 ? 'finish':'unfinish'">交易完成</div>
        </div>
        <div class="order-time">
            <div>{{detail.createTime}}</div>
            <div>{{detail.payTime}}</div>
            <div>{{detail.deliveryTime}}</div>
            <div>{{detail.receivingTime}}</div>
        </div>
        <div class="order-information-title">商品信息</div>
        <div class="good-list">
            <table>
                <tr>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>商品总价</th>
                    <th>订单操作</th>
                </tr>
                <tr v-for="(item,index) in detail.goodsList">
                    <td>
                        <div class="good-detail">
                            <img :src="item.previewImage">
                            <div>
                                <div><label><span>名称：</span><span>{{item.title}}</span></label></div>
                                <div>
                                    <!--<label><span>分类：</span><span>{{item.categoryName}}</span></label>
                                                                        <label><span>月销量：</span><span>{{item.monthSales}}单</span></label>-->
                                </div>
                                <div>
                                    <label><span>规格：</span><span>{{item.specifications}}</span></label>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>￥{{item.price}}</td>
                    <td>{{item.number}}</td>
                    <td v-if="index == 0" :rowspan="detail.goodsList.length">￥{{detail.actualPrice}}</td>
                    <td v-if="index == 0" :rowspan="detail.goodsList.length">
                    <label v-if="detail.orderStatus == 2" @click="handleEditFaHuo(detail)" style="cursor: pointer">点击发货</label>
                    <label v-if="detail.refundOrder != null && detail.refundOrder.refundStatus == 7" @click="handleEditRefundApply(detail)" style="cursor: pointer">审核退货申请</label>
                    <label v-if="detail.refundOrder != null && detail.refundOrder.refundStatus == 8" @click="handleEditRefundPrice(detail)" style="cursor: pointer">确认退款</label>
                    </td>
                </tr>
            </table>
        </div>
        <div class="order-information">
            <div>
                <div class="order-information-theme">订单详细信息</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell half">
                        <div><label class="short">订单编号：</label><span>{{detail.orderNumber}}</span></div>
                        <div><label class="short">支付订单号：</label><span>{{detail.payNumber}}</span></div>
                        <div><label class="short">支付流水号： </label><span>{{detail.payBillNumber}}</span></div>
                    </div>
                    <div class="order-information-cell half">
                        <div><label class="long">订单创建时间：</label><span>{{detail.createTime}}</span></div>
                        <div><label class="long">支付时间：</label><span>{{detail.payTime}}</span></div>
                        <div><label class="long">订单过期时间：</label><span>{{detail.invalidTime}}</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="order-information-theme full">订单备注</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell">
                        <div><label class="short">快递公司：</label><span>{{detail.address.expressCompany}}</span></div>
                        <div><label class="short">快递运单号：</label><span>{{detail.address.expressNumber}}</span></div>
                        <div><label class="short">订单备注：</label><span>{{detail.remark}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-information">
            <div>
                <div class="order-information-theme">发货信息</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell full" v-if="detail.teahouse != null">
                        <div><label class="short">分销商ID： </label><span>{{detail.teahouse.id}}</span></div>
                        <div><label class="short">发货人：</label><span>{{detail.teahouse.name }}</span></div>
                        <div><label class="short">联系电话：</label><span>{{detail.teahouse.phone}}</span></div>
                        <div><label class="short">发货时间： </label><span>{{detail.deliveryTime}}</span></div>
                        <div><label class="short">发货地址： </label><span>{{detail.teahouse.provinceName}}{{detail.teahouse.cityName}}{{detail.teahouse.areaName}}{{detail.teahouse.street}}</span>
                        </div>
                        <!--                        <div><label class="short">收款账号：</label><span>{{detail.payBossAccount}}</span></div>-->
                    </div>
                </div>
            </div>
            <div>
                <div class="order-information-theme ">收货信息</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell full" v-if="detail.address != null">
                        <div><label class="long">收货人：</label><span>{{detail.address.receivingName}}</span></div>
                        <div><label class="long">联系电话：</label><span>{{detail.address.phone}}</span></div>
                        <div><label class="long">收货地址： </label><span>{{detail.address.provinceName}}{{detail.address.cityName}}{{detail.address.areaName}}{{detail.address.street}}</span>
                        </div>
                        <div><label class="long">收货时间： </label><span>{{detail.receivingTime}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-information">
            <div>
                <div class="order-information-theme">付款信息</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell half">
                        <div><label class="short">订单来源：</label><span>
                            {{detail.source == 1 ? '小程序' : ''}}
                            {{detail.source == 2 ? 'H5' : ''}}
                            {{detail.source == 3 ? '公众号' : ''}}
                        </span></div>
                        <div><label class="short">下单日期：</label><span>{{detail.createTime}}</span></div>
                        <div><label class="short">支付类型：</label><span>
                            {{detail.payType == 0 ? '未支付' : ''}}
                            {{detail.payType == 1 ? '支付宝' : ''}}
                            {{detail.payType == 2 ? '微信' : ''}}
                        </span></div>
                    </div>
                    <div class="order-information-cell half">
                        <div><label class="long">快递费用：</label><span class="orange">￥{{detail.logisticsPrice}}</span>
                        </div>
                        <div><label class="long">优惠金额：</label><span class="orange">￥{{detail.voucherPrice}}</span></div>
                        <div><label class="long">实际支付金额：</label><span class="orange">￥{{detail.actualPrice}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div  v-if="detail.refundOrder != null">
                <div class="order-information-theme">退货信息</div>
                <div class="order-information-cellbg">
                    <div class="order-information-cell half">
                        <div><label class="long">退货订单号：</label><span>{{detail.refundOrder.refundNumber}}</span></div>
                        <div><label class="long">退款流水号：</label><span>{{detail.refundOrder.refundBillNumber}}</span></div>
                        <div><label class="long">退款金额： </label><span>{{detail.refundOrder.refundPrice}}</span></div>
                        <div><label class="long">退货说明： </label><span>{{detail.refundOrder.remark}}</span></div>
                    </div>
                    <div class="order-information-cell half">
                        <div><label class="long">退货状态： </label><span>{{detail.refundStatusValue}}</span></div>
                        <div><label class="long">提交退货时间： </label><span>{{detail.refundOrder.createTime}}</span></div>
                        <div><label class="long">退货成功时间： </label><span>{{detail.refundOrder.refundTime}}</span></div>
                        <div><label class="long">退货失败备注： </label><span>{{detail.refundOrder.failRemark}}</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="发货" :visible.sync="editVisible" width="30%" z-index="100" v-if="detail.address != null">
            <div class="handle-box">
                <label class="title-lable">收货人:&nbsp;{{detail.address.receivingName}}&nbsp;&nbsp;&nbsp;{{detail.address.phone}}</label>
                <br>
                <label class="title-lable">地 址:&nbsp;
                    {{detail.address.provinceName}}{{detail.address.cityName}}{{detail.address.areaName}}{{detail.address.street}}
                </label>
                <br>
                <label class="title-lable">当前状态:&nbsp;&nbsp;&nbsp;<span style="color: red">{{detail.orderStatusValue}}</span><span v-if="detail.refundStatusValue != null" style="color: red">->{{detail.refundStatusValue}}</span></label>
                <br>
                <label class="title-lable">购买数量:&nbsp;
                    {{detail.number}}
                </label>
            </div>
            <div>
                选择快递：<el-input type="textarea" rows="1" v-model="fahuoForm.expressCompany"></el-input>
                输入快递号：<el-input type="textarea" rows="1" v-model="fahuoForm.expressNumber"></el-input>
                <!-- 卡号：<el-input type="textarea" rows="3" v-model="fahuoForm.cardNumber"></el-input> -->
            </div>   
            <el-form ref="form" :model="fahuoForm" label-width="70px">
                发货备注:<el-input type="textarea" rows="5" v-model="fahuoForm.remark"></el-input>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确定发货</el-button>
            </span>
        </el-dialog>

    </el-dialog>
</template>

<script>
    export default {
        name: 'orderDetail',
        data() {
            return {
                visible: false,
                detail: {},
                editVisible: false,
                fahuoForm: {
                    id: '',
                    remark: '',
                    expressCompany:'',
                    expressNumber:'',
                    cardNumber:''
                }
            };
        },
        created() {
            //this.getOrderDetail({});
        },
        methods: {
            getOrderDetail(id) {
                if (!isNaN(id)) {
                    this.visible = true;
                    //this.$route.query.orderId
                    orderDetail(id).then(res => {
                        if (res.returnCode == 200) {
                            this.detail = res.data;
                        } else {

                        }
                    });
                }
            },
            handleEditFaHuo(detail) {
                console.log(detail)
                this.fahuoForm = {
                    id: detail.id,
                    remark: detail.remark,
                    number:detail.number
                };
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit() {
                orderDelivered(this.fahuoForm).then(res => {
                    if (res.returnCode == 200) {
                        this.editVisible = false;
                        this.$message.success(`发货成功！！！`);
                        this.getOrderDetail(this.fahuoForm.id)
                    } else {
                        this.$message.success(res.returnMsg);
                    }
                });
            },
            //审核退货申请弹出框
            handleEditRefundApply(row) {
                const h = this.$createElement;
                this.$msgbox({
                    title: '审核退货申请',
                    message: h('p', null, [
                        h('span', null, '当前订单状态:'),
                        h('i', { style: 'color: red' }, row.orderStatusValue + '->' + row.refundStatusValue),
                        h('br', null, ''),
                        h('span', null, '申请退货说明:'),
                        h('i', { style: 'color: blue' }, row.refundOrder.remark)
                    ]),
                    showCancelButton: true,
                    distinguishCancelAndClose: true,
                    confirmButtonText: row.orderStatus == 2 ? '确认退款' : '审核通过',
                    cancelButtonText: '驳回申请',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            done();
                            var data = row.refundOrder;
                            updateApplySuccessRefund(data).then(res => {
                                if (res.returnCode == 200) {
                                    this.$message.success(res.returnMsg);
                                    this.getOrderDetail(row.id);
                                } else {
                                    this.$message.success(res.returnMsg);
                                }
                            });
                        }
                        if (action === 'cancel') {
                            done();
                            this.applyFail(row, '');
                        }
                        if (action === 'close') {
                            done();
                        }
                    }
                }).catch(() => {
                });
            },
            //审核失败
            applyFail(row, error) {
                //输入失败原因
                var failRemark = prompt('请输入驳回申请原因' + error);
                if (failRemark == null) {
                    alert('取消本次审核!!!!!!');
                    return;
                }
                if (failRemark.length < 5) {
                    this.applyFail(row, '(不能为空或者小于五个字)');
                    return;
                }
                var data = row.refundOrder;
                data.failRemark = failRemark;
                updateApplyFailRefund(data).then(res => {
                    if (res.returnCode == 200) {
                        this.$message.success(`审核退款单驳回成功！！！`);
                        this.getOrderDetail(row.id);
                    } else {
                        this.$message.success(res.returnMsg);
                    }
                });
            },
            // 收到退货快递过后执行退款
            handleEditRefundPrice(row) {
                if (confirm('是否确认退款到用户支付账户？？？')) {
                    var data = row.refundOrder;
                    refundUserPrice(data).then(res => {
                        if (res.returnCode == 200) {
                            this.$message.success(`已经退款到用户支付账户！！！`);
                            this.getOrderDetail(row.id);
                        } else {
                            this.$message.success(res.returnMsg);
                        }
                    });
                }
            }
        }
    };
</script>
<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .el-dialog__header {
        padding: 0px;
    }

    .el-dialog__body {
        padding: 20px 15px 10px;
        border-bottom: 1px solid rgba(221, 221, 221, 1);
    }
    .tltle {
        width: 60px;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

    }

    .order-detail {
        padding: 15px 0px 40px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .order-detail label {
        margin-right: 80px;
    }

    .order-status, .order-time {
        font-size: 0px;
    }

    .order-status div {
        width: 20%;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        color: white;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        text-align: center;
    }

    .finish {
        background: #1F863A;
    }

    .unfinish {
        background: #8FC29D;
    }

    .order-status div:nth-of-type(1) {
        border-radius: 30px 0px 0px 30px;
    }

    .order-status div:nth-of-type(5) {
        border-radius: 0px 30px 30px 0px;
    }

    .order-time div {
        width: 20%;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        color: #606266;
        line-height: 30px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        text-align: center;
    }

    .order-information-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .good-list table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 2px;
        border-top: 1px solid rgba(221, 221, 221, 1);
        border-left: 1px solid rgba(221, 221, 221, 1);
    }

    .good-list th, .order-information-theme {
        height: 59px;
        line-height: 59px;
        background: rgba(244, 245, 250, 1);
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .good-list th, .good-list td {
        text-align: left;
        padding-left: 40px;
        border-bottom: 1px solid rgba(221, 221, 221, 1);
        border-right: 1px solid rgba(221, 221, 221, 1);
    }

    .good-list th:nth-of-type(1), .good-list td:nth-of-type(1), .order-information-theme {
        padding: 5px 0px 5px 20px;
    }

    .good-detail img {
        width: 100px;
        height: 100px;
    }

    .good-detail > div {
        margin-left: 10px;
        display: inline-block;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: rgba(51, 51, 51, 1);
        text-align: left;
        vertical-align: top;
    }

    .good-detail > div > div {
        margin-bottom: 10px;
    }

    .good-detail > div > div:nth-of-type(1) {
        font-size: 16px;
    }

    /** .good-detail > div > div:nth-of-type(2) label, **/
    .good-detail > div > div:nth-of-type(3) label {
        display: inline-block;
        width: 150px;
    }

    .good-detail > div > div span:nth-of-type(1) {
        display: inline-block;
        width: 75px;
    }

    td > label {
        display: inline-block;
        width: 130px;
        height: 50px;
        line-height: 50px;
        border: 1px solid rgba(31, 134, 58, 1);
        border-radius: 8px;
        font-size: 18px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 134, 58, 1);
        text-align: center;
    }

    .order-information {
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .order-information > div {
        display: inline-block;
        width: 49%;
        border: 1px solid rgba(221, 221, 221, 1);
    }

    .order-information > div:nth-of-type(1) {
        float: left;
    }

    .order-information > div:nth-of-type(2) {
        float: right;
    }

    .order-information-cellbg {
        padding: 20px;
    }

    .order-information-cell {
        display: inline-block;
        text-align: left;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 28px;
        color: rgba(51, 51, 51, 1);
    }

    .full {
        width: 100%;
    }

    .half {
        width: 50%;
    }

    .order-information-cell label {
        display: inline-block;
    }

    .short {
        width: 85px;
    }

    .long {
        width: 100px;
    }

    .orange {
        color: #FF8426;
    }
</style>